<template>
  <div class="bullet-wrap">
    <div
      class="bullet-item"
      :class="item.isImportant ? 'bold bullet-animation-' + item.random : ' bullet-animation-' + item.random"
      :data-line="item.line"
      v-for="item in state.bulletlist"
      @animationend="animationend"
      :key="item.id"
      :style="{
        top: item.top,
      }"
    >
      <div class="avatar-left">
        <img :src="item?.user?.avatar" alt="" class="avatar" />
      </div>
      <div class="msg-right">
        <img v-if="item.type == 'image' || item.type == 'sticker'" :src="item.body" alt="" class="msg-img" />
        <span v-else class="msg-text">
          {{ item.body }}
        </span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, onMounted } from "vue"

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  height: { type: Number, default: 0 },
})

import socketStore from "@/store/modules/socket"
const danmu = ref([])

const getUUID = () => {
  return Date.now() + Math.random()
}

watch(
  () => socketStore().bullet_screen,
  (val) => {
    if (val?.type) {
      let data = {
        ...val,
        id: getUUID(),
      }
      danmu.value.push(data)
    }
  },
  { immediate: true, deep: true }
)

const state = reactive({
  list: [], // 普通的弹幕队列
  bulletlist: [], // 当前正在执行的
})

const animationend = () => {
  state.bulletlist.shift()
  // state.list.push(state.bulletlist.shift())
}

const getRandomInt = (min = 0, max = 100, type = "") => {
  min = Math.ceil(min) // 将min向上取整
  max = Math.floor(max) // 将max向下取整
  let top = Math.floor(Math.random() * (max - min + 1)) + min
  if (["sticker", "image"].includes(type)) {
    if ((top > 62 && top < 300) || top > 310) {
      return getRandomInt(0, props.height, type)
    }
  } else {
    if (top > 96 && top < 300) {
      return getRandomInt(0, props.height, type)
    }
  }
  return top
}
onMounted(() => {
  init()
})

watch(
  () => props.modelValue,
  (v) => {
    init()
  }
)
const init = () => {
  if (props.modelValue) {
    barrage()
    // initdanmu()
  } else {
    state.bulletlist = []
  }
}
// const emoji = {
//   捂脸: "😀",
//   捂脸: "😀",
//   捂脸: "😀",
//   捂脸: "😀",
//   捂脸: "😀",
// }

const containsBrackets = (str, string) => {
  return str.includes("[]")
}

const extractBracketContents = (str) => {
  const regex = /\[([^\]]+)\]/g
  let matches = []
  let match

  while ((match = regex.exec(str))) {
    matches.push(match[1]) // 第一个子匹配项是括号内的内容
  }

  return matches
}

const barrage = () => {
  setTimeout(() => {
    var item = null
    if (danmu.value.length) {
      item = danmu.value.shift()
      item.random = parseInt(Math.random() * (3 - 0 + 1) + 0, 10)
      item.top = getRandomInt(0, props.height, item.type) + "px"

      if (item.type == "sticker" || item.type == "image") {
        // console.log(item.top)
      } else {
        // let arr = extractBracketContents(item.body)
        // arr.forEach((v) => {
        //   item.body = item.body.replace(`[${v}]`, emoji[v] || `[${v}]`)
        // })
      }
      state.bulletlist.push(item)
      // console.log("弹幕即将发射～～～～～")
    }
    props.modelValue && barrage()
  }, 1000)
}

// const initdanmu = () => {
//   // console.log(555555)
//   setTimeout(() => {
//     console.log("弹幕即将发射～～～～～")
//     danmu.value.push({
//       body: "https://xc-callback-filesystem.oss-cn-shenzhen.aliyuncs.com/feishu/message/file/cdd16ea56772480eb1194c4f2faff055yur.gif",
//       type: "sticker",
//       id: getUUID(),
//       user: {
//         avatar: "https://s1-imfile.feishucdn.com/static-resource/v1/v2_5872ca87-f328-435d-8c63-ba34883d4c7g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp",
//       },
//     })
//     danmu.value.push({
//       body: "https://xc-callback-filesystem.oss-cn-shenzhen.aliyuncs.com/feishu/message/file/d3d03908f1d94a86bcaa23f4d653ec55myI.jpeg",
//       type: "image",
//       id: getUUID(),
//       user: {
//         avatar: "https://s1-imfile.feishucdn.com/static-resource/v1/v2_5872ca87-f328-435d-8c63-ba34883d4c7g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp",
//       },
//     })
//     danmu.value.push({
//       body: "[捂脸][捂脸][大哭]6666666",
//       type: "text",
//       id: getUUID(),
//       user: {
//         avatar: "https://s1-imfile.feishucdn.com/static-resource/v1/v2_5872ca87-f328-435d-8c63-ba34883d4c7g~?image_size=noop&cut_type=&quality=&format=png&sticker_format=.webp",
//       },
//     })
//     if (danmu.value.length > 50) {
//       console.log("弹幕即将发射完毕～～～～～")
//       // console.log(socketStore().danmu)
//       return
//     }
//     props.modelValue && initdanmu()
//   }, 100)
// }
defineExpose({})
</script>
<style scoped lang="scss">
.flex {
  display: flex;
}

.van-cell-group--inset {
  margin: auto;
  border-radius: 50px;
  border: 1px solid #d8d7d7;
}
.van-cell {
  background: #f8f8f8;
}
.bold {
  font-weight: bold;
}
.bullet-wrap {
  height: 400px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
}
.bullet-item {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding-right: 16px;
  z-index: 1;
  color: #333;
  min-width: 80px;

  .avatar-left {
    .avatar {
      width: 38px;
      height: 38px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-left: none;
      border-radius: 20px;
      margin-right: 8px;
    }
  }
  .msg-right {
    .msg-img {
      height: 60px;
      margin: 4px 4px 4px 0;
    }
    .msg-text {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
}
.bullet-animation-0 {
  animation: right2left 5s linear both;
}
.bullet-animation-1 {
  animation: right2left 8s linear both;
}
.bullet-animation-2 {
  animation: right2left 14s linear both;
}
.bullet-animation-3 {
  animation: right2left 18s linear both;
}

@keyframes right2left {
  0% {
    transform: translate(100vw);
  }
  100% {
    transform: translate(-100%);
  }
}
</style>
